<script>
// TODO 保存权限还没做

export default {
  data() {
    return {
      show:false,
      requestParam:{
        roleId:''
      },
      permissionList:[],
      permissionListByRoleId:[],
      permissionIdsByRoleId:[]
    }
  },
  created() {
    this.getPermissionList();
    this.getPermissionListByRoleId(this.requestParam.roleId);
  },
  methods:{
    /**
     * 用来修改或查看数据时打开
     */
    open(row){
      this.requestParam.roleId = row.id;
      this.show = true;
      this.getPermissionList();
      this.getPermissionListByRoleId(this.requestParam.roleId);
    },
    close(){
      this.show = false;
    },
    // 获取角色的所有权限
    getPermissionListByRoleId(roleId){
      this.$kt.request.send({
        uri: "/system-auth/admin/rolePermission/getAll",
        data:{
          roleId:roleId
        },
        stateSuccess: (res) => {
          this.permissionListByRoleId = res.data;
          this.permissionIdsByRoleId = [];
          for (let i = 0; i < this.permissionListByRoleId.length; i++) {
            this.permissionIdsByRoleId.push(this.permissionListByRoleId[i].permission.id);
          }
        },
        stateError: (res) => {
          this.$message.error(res.message);
        }
      });
    },

    // 获取所有权限
    // /system-auth/admin/permission
    getPermissionList(){
      this.$kt.request.send({
        uri: "/system-auth/admin/permission/getAll",
        data:{},
        stateSuccess: (res) => {
          this.permissionList = res.data;
        },
        stateError: (res) => {
          this.$message.error(res.message);
        }
      });
    },
    // 判断是否有权限
    hasPermission(permissionId){
      for(let i = 0; i < this.permissionIdsByRoleId.length; i++){
        if(this.permissionIdsByRoleId[i] == permissionId){
          return true;
        }
      }
      return false;
    },
    // 选中
    selectPermission(permissionId){
      if(this.hasPermission(permissionId)){
        this.permissionIdsByRoleId = this.permissionIdsByRoleId.filter(item => item != permissionId);
      }else{
        this.permissionIdsByRoleId.push(permissionId);
      }
    },
    toSave(){
      // element-plus中的loading
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$kt.request.send({
        uri: "/system-auth/admin/role/newSave",
        data:{
          roleId: this.requestParam.roleId,
          permissionIds: this.permissionIdsByRoleId
        },
        stateSuccess: (res) => {
          this.$message.success(res.message);
          this.$emit("saveSuccess");
          this.close();
          loading.close();
        },
        stateError: (res) => {
          this.$message.error(res.message);
          loading.close();
        }
      });
    }

  }
}
</script>

<template>
  <el-dialog v-model="show" width="400px">
    <el-form label-position="top">
      <el-form-item :label="$i18n.enToGlobal('permissions')">
        <div>

          <div
          v-for="(item, index) in permissionList"
          class="this-tag"
          :class="{
            'this-tag-selected': hasPermission(item.id)
          }"
          @click="selectPermission(item.id)"
          >
            {{item.name}}
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div style="height: 20px"></div>
    <el-button type="primary"
               size="large"
               style="width: 100%"
               @click="toSave">
      {{$i18n.enToGlobal("Save")}}
    </el-button>
  </el-dialog>
</template>

<style scoped lang="scss">
.this-tag{
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #f0f0f0;
}

.this-tag-selected{
  background-color: #000000;
  color: #fff;
}
.this-tag:hover{
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}
.this-tag-selected:active{
  color: #fff;
  background-color: rgba(0, 0, 0, 1);
}
</style>